<script setup lang='ts'>
import { useGetBuyerInfo } from '@fl/api/purchase'
import { SearchForm } from '@fl/components'

const { data, isLoading } = useGetBuyerInfo()

const group = [
    {
        columns: [
            {
                colProps: {
                    span: 8,
                },
                fieldProps: {
                    disabled: true,
                },
                label: '统一社会信用代码',
                prop: 'unifiedSocialCreditCode',
                valueType: 'text',
            },
            {
                colProps: {
                    span: 8,
                },
                fieldProps: {
                    disabled: true,
                },
                label: '公司名称',
                prop: 'enterpriseName',
                valueType: 'text',
            },
            {
                colProps: {
                    span: 8,
                },
                fieldProps: {
                    disabled: true,
                },
                label: '法定代表人',
                prop: 'legalRepresentative',
                valueType: 'text',
            },
            {
                colProps: {
                    span: 8,
                },
                fieldProps: {
                    disabled: true,
                },
                label: '成立日期',
                prop: 'establishmenDate',
                valueType: 'text',
            },
            {
                colProps: {
                    span: 8,
                },
                fieldProps: {
                    disabled: true,
                },
                label: '注册资本',
                prop: 'registeredCapital',
                valueType: 'text',
            },
            {
                colProps: {
                    span: 24,
                },
                fieldProps: {
                    disabled: true,
                },
                label: '注册地址',
                prop: 'registeredAddress',
                valueType: 'text',
            },
            {
                colProps: {
                    span: 24,
                },
                label: '企业LOGO',
                prop: 'logo',
            },
        ],
        title: '工商信息(数据来源于企查查)',
    },
    {
        columns: [
            {
                colProps: {
                    span: 8,
                },
                fieldProps: {
                    disabled: true,
                },
                label: '姓名',
                prop: 'legalRepresentative',
                valueType: 'text',
            },
            {
                colProps: {
                    span: 8,
                },
                fieldProps: {
                    disabled: true,
                },
                label: '电话',
                prop: 'legalMobile',
                valueType: 'text',
            },
            {
                colProps: {
                    span: 8,
                },
                fieldProps: {
                    disabled: true,
                },
                label: '身份证号码',
                prop: 'legalCard',
                valueType: 'text',
            },
        ],
        title: '法人信息',
    },
    {
        columns: [
            {
                colProps: {
                    span: 8,
                },
                fieldProps: {
                    disabled: true,
                },
                label: '姓名',
                prop: 'contactName',
                valueType: 'text',
            },
            {
                colProps: {
                    span: 8,
                },
                fieldProps: {
                    disabled: true,
                },
                label: '电话',
                prop: 'contactMobile',
                valueType: 'text',
            },
            {
                colProps: {
                    span: 8,
                },
                fieldProps: {
                    disabled: true,
                },
                label: '身份证号码',
                prop: 'contactCardNo',
                valueType: 'text',
            },
        ],
        title: '联系人信息',
    },
    {
        columns: [
            {
                colProps: {
                    span: 8,
                },
                fieldProps: {
                    disabled: true,
                },
                label: '开户名',
                prop: 'accountName',
                valueType: 'text',
            },
            {
                colProps: {
                    span: 8,
                },
                fieldProps: {
                    disabled: true,
                },
                label: '开户行',
                prop: 'bankName',
                valueType: 'text',
            },
            {
                colProps: {
                    span: 8,
                },
                fieldProps: {
                    disabled: true,
                },
                label: '银行账号',
                prop: 'accountNumber',
                valueType: 'text',
            },
        ],
        title: '账户信息',
    },
]

const isHideContactMobile = ref(true)

const isHideContactCardNo = ref(true)

const isHideLegalMobile = ref(true)

const isHideLegalCard = ref(true)

function showText(bool: boolean) {
    return unref(bool) ? '查看' : '隐藏'
}

function showValue(type: 'card' | 'phone', bool: boolean, val: any) {
    if (type === 'card') {
        return unref(bool) ? cardHide(val) : val
    }
    return unref(bool) ? phoneHide(val) : val
}

// 手机号做脱敏处理
function phoneHide(phone: any) {
    if (phone) {
        return String(phone).replace(/(\d{3})\d*(\d{4})/, '$1****$2')
    }
    return phone
}

// 身份证号脱敏
function cardHide(card: any) {
    if (card) {
        return String(card).replace(/^(.{6})\d+(.{4})$/, '$1******$2')
    }
    return card
}
</script>

<template>
    <el-skeleton v-if="isLoading"
                 :rows="5"
    />

    <div v-else>
        <SearchForm v-model="data"
                    :group="group"
                    submit-text="查询"
                    :has-footer="false"
                    label-position="top"
        >
            <template #plus-field-contactMobile>
                {{ showValue('phone', isHideContactMobile, data?.contactMobile) }}
                <span v-if="data?.contactMobile"
                      class="ml-10 cursor-pointer"
                      @click="isHideContactMobile = !isHideContactMobile"
                >
                    {{ showText(isHideContactMobile) }}
                </span>
            </template>

            <template #plus-field-contactCardNo>
                {{ showValue('card', isHideContactCardNo, data?.contactCardNo) }}
                <span v-if="data?.contactCardNo"
                      class="ml-10 cursor-pointer"
                      @click="isHideContactCardNo = !isHideContactCardNo"
                >
                    {{ showText(isHideContactCardNo) }}
                </span>
            </template>

            <template #plus-field-legalMobile>
                {{ showValue('phone', isHideLegalMobile, data?.legalMobile) }}
                <span v-if="data?.legalMobile"
                      class="ml-10 cursor-pointer"
                      @click="isHideLegalMobile = !isHideLegalMobile"
                >
                    {{ showText(isHideLegalMobile) }}
                </span>
            </template>

            <template #plus-field-legalCard>
                {{ showValue('card', isHideLegalCard, data?.legalCard) }}
                <span v-if="data?.legalCard"
                      class="ml-10 cursor-pointer"
                      @click="isHideLegalCard = !isHideLegalCard"
                >
                    {{ showText(isHideLegalCard) }}
                </span>
            </template>

            <template #plus-field-logo>
                <el-image v-if="data?.logo"
                          style="width: 50px; height: 50px"
                          :src="data?.logo"
                          :preview-src-list="[data?.logo]"
                          fit="cover"
                />
            </template>
        </SearchForm>
    </div>
</template>
